<template>
  <div class="bonus">
    <header>
      <span @click="$back()">
        <el-icon color="#fff" size="18">
          <ArrowLeftBold />
        </el-icon>
      </span>
      <strong>{{ $t("language.bonus.name") }}</strong>
      <span @click="$openPage('/kefu')">
        <NuxtImg src="/img/kefu.png" alt="" />
      </span>
    </header>
    <main>

      <dl v-if="bonus.length != 0" v-infinite-scroll="initData" :infinite-scroll-immediate="false"
        infinite-scroll-distance=200>
        <dd v-for="(item, index) in bonus" :key="index">
          <h3>{{ $t("language.bonus.title") }}</h3>
          <strong>{{ $dot(item.balanceBonus) }} BRL</strong>
          <span>{{ $t("language.bonus.transform") }} BRL {{ $dot(item.validBets) }}</span>

          <el-progress :text-inside="true" :show-text="false" color="#fff" :stroke-width="15"
            :percentage="parseInt(item.current) / parseInt(item.target) * 100" />
          <div>
            <i>{{ $t("language.bonus.starttime") }}</i><i>{{ $t("language.bonus.endtime") }}</i>
          </div>
          <div>
            <span>{{ item.accessDate }}</span><span>{{ item.expireDate }}</span>
          </div>
        </dd>
      </dl>
      <div class="nodata" v-else>
        <NuxtImg src="/img/bg2.png" alt="" />
        <p>{{ $t("language.rechange.tips") }}</p>
      </div>
    </main>
  </div>
</template>
<script setup lang="ts">
import { ArrowLeftBold } from '@element-plus/icons-vue'

// const { proxy } = getCurrentInstance();
import { reactive, nextTick, computed, onActivated } from "vue";
// const { proxy } = getCurrentInstance();
let store = useStore()
let info = computed(() => store.userinfo)

let bonusForm = reactive<{
  id: any,
  pageIndex: number,
  pageSize: number
}>({
  id: info.value.gameID,
  pageIndex: 1,
  pageSize: 10,
});
let bonus: any = reactive([])
let initData = () => {
  useHttpPOST(
    `/Assets/v1.0/Bonus/Flow`, { ...bonusForm }
  )
    .then(({ data }: { data: any }) => {
      nextTick(() => {
        bonus.push(...data.value.data.bonus);
        bonusForm.pageIndex++
      })

    });
}
onActivated(() => {
  initData()
});
</script>
<style scoped lang="scss">
:deep(.el-progress) {
  border-radius: 7.5px !important;
}

:deep(.el-progress-bar__inner) {
  background: rgb(0, 144, 109) !important;
  border-radius: 7.5px !important;
}

.bonus {
  width: 100%;

  header {
    width: 100%;
    height: 45px;
    position: fixed;
    left: 0;
    top: 0;
    @include flex(row, space-between, center);
    background-color: rgb(36, 39, 43);
    padding: 0 20px;
    color: #fff;

    span {
      display: block;
      height: 28px;
      width: 28px;
      @include flex(row, flex-start, center);
      cursor: pointer;

      img {
        width: 100%;
        height: 100%;
      }
    }
  }

  main {
    padding: 65px 20px 20px;
    width: 100vw;
    background-color: rgb(26, 26, 26);
    @include flex(column, flex-start, center);

    .nodata {
      width: 100%;
      height: 300px;

      img {
        width: 165px;
      }

      @include flex(column, center, center);

      p {
        font-size: 17px;
        color: #b5bac8;
        margin-top: 20px;
      }
    }

    dl {
      width: 100%;
      overflow: auto;
      flex: 1;

      dd {
        width: 100%;
        border: 1px solid #4a4c53;
        border-radius: 14px;
        padding: 12px 20px;
        margin-bottom: 20px;
        background-image: linear-gradient(#1c1e22, #1c1e22),
          linear-gradient(#fff, #fff);

        h3 {
          width: 100%;
          text-align: center;
          font-size: 16px;
          color: #fff;
        }

        strong {
          color: #fff;
          display: block;
        }

        >span {
          color: #fff;
          display: block;
          margin: 8px 0 14px 0;
        }

        p {
          width: 100%;
          height: 15px;
          border-radius: 7.5px;
          background-color: #fff;
        }

        >div {
          width: 100%;
          margin-top: 8px;
          @include flex(row, space-between, center);

          i {
            font-style: normal;
            font-size: 16px;
            color: #999;
          }

          span {
            font-size: 14px;
            color: #999;
          }
        }
      }
    }
  }
}
</style>
